<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <wx-tables
    :columns="columns"
    title="景点类型"
    :data-source="dataSource"
    :loading="loading"
    :total="total"
    :size.sync="size"
    :page.sync="page"
    @handlePage="handlePage"
  >
    <!-- tools -->
    <template #tools>
      <el-button type="primary" class="table-btn" @click="handleOpenForm()">新增类型</el-button>
      <!--      <el-button class="table-btn" icon="el-icon-refresh-right" @click="handleGetTable">刷新</el-button>-->
    </template>
    <template v-slot:oper="record">
      <div class="oper-box">
        <span v-if="record.row && record.row.type === 0"><el-link type="primary" @click="handleEit(record.row)">编辑</el-link></span>
        <el-popover
          v-model="visibleList[record.$index]"
          placement="bottom"
          @show="handleShowSort(record.row)"
          title="排序"
          width="200"
          trigger="click">
          <el-input v-model="sortNum" oninput="value=value.replace(/[^\d]/g,'')" maxlength="2" placeholder="请输入大小"></el-input>
          <div class="sort-button">
            <el-button @click="handleSort(record.row.id,record.$index)" class="el-button el-button--primary el-button--mini" type="primary">确认</el-button>
          </div>
          <el-link type="primary" slot="reference">排序</el-link>
        </el-popover>
        <el-popconfirm
          v-if="record.row && record.row.type === 0"
          title="确定删除当前景点吗？"
          @confirm="handleDelete(record.row.id)"
        >
          <el-link slot="reference" type="danger">删除</el-link>
        </el-popconfirm>
      </div>
    </template>
    <wx-dialog
      ref="wx-dialog"
      :visible.sync="formVisible"
      :is-add="isAdd"
      width="500px"
      @ok="handleSaveForm"
    >
      <div class="wx-dialog-form">
        <el-form ref="ruleForm" v-loading="formLoading" :rules="ruleForm" :model="formInfo" label-position="left" label-width="90px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="formInfo.name" style="width: 200px;" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="关联景区" prop="tour_scenic_ids">
            <el-tree
              class="scenic-tree"
              :data="scenicList"
              show-checkbox
              :default-checked-keys="formInfo.tour_scenic_ids"
              node-key="id"
              ref="ScenicTree"
              :props="defaultProps">
            </el-tree>
          </el-form-item>
        </el-form>
      </div>
    </wx-dialog>
  </wx-tables>
</template>

<script>
import WxDialog from '@/components/WxDialog'
import WxTables from '@/components/WxTables'
import TableMixins from '@/components/WxTables/mixins'
import {
  tourScenicGetListByCon,
  tourScenicItemTypeCreate, tourScenicItemTypeDestroy,
  tourScenicItemTypeEdit,
  tourScenicItemTypeGetListByCon,
  tourScenicItemTypeSetSort
} from '@/api/scenic'
export default {
  name: 'ManagerList',
  components: {
    WxDialog,
    WxTables
  },
  mixins: [TableMixins],
  data() {
    return {
      pwdDialog: false,
      columns: [
        { config: { type: 'index', width: 100 }, label: '序号' },
        { dataIndex: 'name', label: '类型名称' },
        { dataIndex: 'oper', label: '操作', slots: true }
      ],
      markId: '',
      sortNum: '',
      town_id: '',
      ruleForm: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      },
      formInfo: {},
      visibleList: [],
      scenicList: [],
      defaultProps: {
        label: 'name'
      }
    }
  },
  watch: {
    formVisible(val) {
      if(!val) this.$refs.ScenicTree.setCheckedKeys([])
    }
  },
  mounted() {
    this.getScenicList()
  },
  methods: {
    /**
     * 获取列表
     */
    getList() {
      tourScenicItemTypeGetListByCon({town_id: this.town_id,page: this.page}).then(res => {
        if (this.pagination) {
          const { data, total } = res.data
          this.total = total
          this.dataSource = data
          this.cacheDataSource = JSON.parse(JSON.stringify(data))
        } else {
          this.dataSource = res.data
          this.cacheDataSource = JSON.parse(JSON.stringify(res.data))
        }
        this.handleSetCancelStatus?.()
        // this.handleCompleteTable()
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 获取景区列表
     */
    getScenicList() {
      tourScenicGetListByCon({town_id:this.town_id,is_paginate: 0,}).then(res => {
          this.scenicList = res.data
      })
    },
    /**
     * 新增/编辑人员
     */
    createManager(idSend) {
      this.formInfo.tour_scenic_ids = this.$refs.ScenicTree.getCheckedKeys()
      if(Object.keys(idSend).length) {
        tourScenicItemTypeEdit({ ...this.formInfo,...idSend,town_id: this.town_id })
          .then((res) => {
            if (res.code === 200) {
              this.$message.success(this.isAdd ? '添加成功' : '编辑成功')
              this.formInfo = {}
              this.formVisible = false
              this.handleGetTable()
            }
          }).finally(() => {
          this.handleResetDialog()
        })
      }else{
        tourScenicItemTypeCreate({ ...this.formInfo,town_id: this.town_id })
          .then((res) => {
            if (res.code === 200) {
              this.$message.success(this.isAdd ? '添加成功' : '编辑成功')
              this.formInfo = {}
              this.formVisible = false
              this.handleGetTable()
            }
          }).finally(() => {
          this.handleResetDialog()
        })
      }
    },
    /**
     * 更改人员状态
     */
    changeStatus(id,status) {
      managerSetStatus({
        admin_town_id: id,
        status
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.handleGetTable()
        }
      })
    },
    /**
     * 重置人员密码
     * @param id
     */
    handleChangePassWord(id) {
      adminPortalResetPassword({ id,type:2 }).then((res) => { if (res.code === 200) { this.$message.success(res.msg) } })
    },
    /**
     * 编辑
     * @param item
     */
    handleEit(item) {
      const { id, name,tour_scenic_ids } = item
      this.markId = 'tour_scenic_item_type_id'
      this.handleOpenForm(id,['name','tour_scenic_ids'],{name,tour_scenic_ids})
    },
    /**
     * 排序
     * @param tour_scenic_item_type_id
     * @param index
     */
    handleSort(tour_scenic_item_type_id,index) {
      tourScenicItemTypeSetSort({ tour_scenic_item_type_id,seq: this.sortNum }).then((res) => { if (res.code === 200) {
        this.$message.success(res.msg)
        this.$set(this.visibleList,index,false)
        this.handleGetTable()
      } })
    },
    /**
     * 删除管理员
     * @param admin_ids
     */
    handleDelete(tour_scenic_item_type_ids) {
      tourScenicItemTypeDestroy({ tour_scenic_item_type_ids
      }).then((res) => { if (res.code === 200) {
        this.$message.success(res.msg)
        this.handleGetTable()
      } })
    },
    /**
     * 显示排序
     * @param item
     */
    handleShowSort(item) {
      this.sortNum = item.seq
    },
    /**
     * 翻页
     * @param val
     */
    handlePage(val) {
      this.page = val
    }
  }
}
</script>
<style lang="scss" src="./style/index.scss" scoped/>
<style scoped>
.sort-button {
  margin-top: 8px;
  text-align: right;
}
.scenic-tree {
  height: 220px;
  overflow-y: auto;
}
</style>
